<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            position: relative;
        }
        
        button {
            position: absolute;
            bottom: -50px;
        }
        
        a {
            position: absolute;
            bottom: -50px;
            left: 150px;
        }
    </style>
</head>

<body>
    <div id="app">
        {{num}}
        <div class="container" @click="handleClick1">
            <button @click.stop="handleClick2">点我试试</button>
            <a href="http://www.baidu.com" @click.stop.prevent="handleClick3">百度</a>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        /*
                                      事件绑定-事件修饰符
                                    */
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handleClick1: function() {
                    this.num++
                },
                handleClick2: function() {
                    this.num++
                },
                handleClick3: function() {
                    this.num++
                }
            }
        });
        // 对.container和button和a标签进行点击事件的监听, 都对num进行加1, 
        // 为什么点击按钮会加2? 如何解决
        // 为什么点击a标签除了会加2,还会跳转? 如何解决
    </script>
</body>

</html>